<template>
	<view style="background-color: #f7f7f7">
		<view class="top">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>
			<view style="text-align: center; font-size: 35rpx; color: #fff">输入核销码</view>
			<view class="card">
				<view style="display: flex; justify-content: space-between; align-items: start; margin-top: 35rpx" :style="{ height: checkImg ? '1200rpx' : '100rpx' }">
					<view style="color: #4c8efe">输入核销码</view>
					<view
						style="display: flex; justify-content: space-between; align-items: center; border: 1px solid gray; border-radius: 20px; padding-left: 20rpx; width: 450rpx"
					>
						<input type="text" v-model="QRCode" />
						<button style="width: 100rpx; height: 45rpx; font-size: 20rpx; color: #fff; background-color: #4c8efe; border-radius: 20px" @click="shibie">
							识别
						</button>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="card" v-if="!checkImg">
				<view class="check_code">核销码{{ form.verificationCode }}</view>
				<view class="line"></view>
				<view class="big_title">服务内容</view>
				<view class="small_title">{{ form.serviceinfo }}</view>

				<view class="line"></view>
				<view class="big_title">订单信息</view>
				<view class="small_title">订单价格：￥{{ form.serviceprice }}</view>
				<view class="small_title">
					实付金额：
					<span style="font-weight: 500">￥{{ form.orderPrice }}</span>
				</view>
				<view class="small_title">优惠金额：￥{{ form.serviceprice - form.orderPrice }}</view>
				<view class="small_title">订单编号 {{ form.orderNum }}</view>
				<view class="small_title">支付时间 {{ form.orderTime }}</view>
				<view class="small_title">预约时间 {{ form.reservationTime }}</view>
			</view>
			<button v-if="!checkConfirm && !checkImg" @click="confirmCheck()" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #4c8efe; color: white">
				确认核销
			</button>
			<button v-if="checkConfirm" @click="toIndex()" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #808080; color: white">已核销</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
let QRCode=ref()
const checkImg = ref(true);
const checkConfirm = ref(false);
let form=ref({})
import request from '../../../utils/request';
function backPage() {
	uni.navigateBack();
}
function shibie(){
	request({
		url:'merchant/verificationRecord/getwriteOff/' + uni.getStorageSync('userinfo').mid + '/' + QRCode.value,
		method: 'get',
		success(res) {
			console.log(res);
			form.value={...res.data.order,serviceinfo:res.data.service.serviceInfo,serviceprice:res.data.service.serviceCurrentPrice}
			form.value.orderTime=formatDate(new Date(form.value.orderTime))
			form.value.reservationTime=formatDate(new Date(form.value.reservationTime))
			checkImg.value = false;
		},
		fail(err){
			console.log(err);
		}
	})
}
function formatDate(date) {
    const year = date.getFullYear().toString().slice(2);
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    
    return `${year}-${month}-${day} ${hours}:${minutes}`;
}
function confirmCheck() {
	uni.showModal({
		title: '核销此订单', // 弹框标题
		content: '请您仔细核对此订单，此操作不可撤销，请谨慎操作！', // 弹框内容
		confirmText: '确认', // 确认按钮文本
		cancelText: '取消', // 取消按钮文本
		success: (res) => {
			if (res.confirm) {
		request({
			url: 'merchant/verificationRecord/writeOff/' + uni.getStorageSync('userinfo').mid + '/' + QRCode.value,
			method: 'get',
			success(res) {
				console.log(res);
				if (res.data === 2) {
					uni.showToast({
						title: '核销码过期',
						icon: 'error'
					});
				} else if (res.data === 1) {
					uni.showToast({
						title: '核销码已核销',
						icon: 'error'
					});
				} else if (res.data === -1) {
					uni.showToast({
						title: '核销失败',
						icon: 'error'
					});
				} else if (res.data === 0) {
					uni.showToast({
						title: '核销成功',
						icon: 'success'
					});
					checkConfirm.value = true;
				}
			}
		});
			} else if (res.cancel) {
				// 用户点击了取消按钮
				console.log('用户点击了取消');
				checkConfirm.value = false;
			}
		}
	});
}
function toIndex() {
	uni.redirectTo({
		url: '/pages/index/index'
	});
}
</script>

<style>
@import '@/common/app.css';
.card {
	border-radius: 20px;
	background-color: #fff;
	margin: 30rpx;
	padding: 30rpx 20rpx;
}
.check_code {
	font-weight: 600;
	text-align: center;
}
.line {
	width: 100%;
	height: 1px;
	background-color: gray;
	margin: 20rpx 10rpx;
}
.big_title {
	margin: 20rpx;
	font-weight: 600;
}
.small_title {
	margin: 20rpx;
}
.back-btn {
	margin-left: 20rpx;
	width: 50rpx;
	height: 50rpx;
	position: relative;
}
.back-icon {
	width: 30px;
	height: 30px;
}
.back-icon::before {
	content: '';
	position: absolute;
	width: 20px;
	height: 2px;
	background-color: #fff;
	top: 80rpx;
	left: 47rpx;
	transform: translate(-50%, -50%);
}
.back-icon::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	top: 70rpx;
	left: 30rpx;
}
</style>
